<template>
  <view>
    <view class="category_tab">
      <view class="category_tab_title">
        <view class="title_inner">
          <uni-segmented-control
            :current="current"
            :values="items.map((v) => v.title)"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          ></uni-segmented-control>
        </view>
        <view class="iconfont iconsearch"></view>
      </view>
      <scroll-view
        @scrolltolower="handleScrolltolower"
        enable-flex
        scroll-y
        class="category_tab_content"
      >
        <view class="cate_item" v-for="item in news" :key="item.id">
          <image mode="widthFix" :src="item.thumb"></image>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
 
<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui"; //分段器
export default {
  components: {
    uniSegmentedControl,
  },
  data() {
    return {
      items: [{ title: "最新" }, { title: "热门" }],
      id: -1,
      current: 0,
      params: {
        //获取数据需要的参数
        limit: 30,
        order: "new",
        skip: 0,
      },
      news: [],
      hasMore: true,
    };
  },

  onLoad(options) {
    // console.log(options);
    this.id = options.id;
    // this.id="5e26b92be7bce739af7644b3";
    // this.id="5d5f8e45e7bce75ae7fb8278";
    this.getlist();
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      } else {
        return;
      }
      //当索引为1时展示热门页面
      if (e.currentIndex == 1) {
        this.params.order = "hot";
          this.hasMore = true;
        this.news = [];
        this.params.skip = 0;
        this.getlist();
      }
      //当索引为0时展示最新页面
      if (e.currentIndex == 0) {
        this.params.order = "new";
        this.hasMore = true;
        this.news = [];
        this.params.skip = 0;
        this.getlist();
      }
    },
    getlist() {
      this.request({
        url:
          "http://157.122.54.189:9088/image/v1/vertical/category/" +
          this.id +
          "/vertical",
        data: this.params,
      }).then((result) => {
        console.log(result.res.vertical.length);
        if (result.res.vertical.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多数据了",
            icon: "none",
          });
          return;
        }
        this.news = this.news.concat(result.res.vertical); //数组拼接
      
      });
    },
    handleScrolltolower() {
      //上划时接触到页面底部触发函数
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getlist();
      } else {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
        });
      }
    },
  },
};
</script>
<style lang="scss">
.category_tab_title {
  position: relative;
  .title_inner {
    width: 60%;
    margin: 0 auto;
  }
  .iconfont {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
  }
}

.category_tab_content {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  .cate_item {
    width: 33.33%;
    border: 5rpx solid #fff;
    image {
    }
  }
}
</style>
